<template>
  <c-dlg v-if="alarm" :visible.sync="visible1" :type="2" title="告警详情">
    <el-form :model="alarm" label-width="60px" class="demo-ruleForm" label-position="top">
      <div class="form-row">
        <div class="row-item">
          <el-form-item label="客户名称">
            <div class="content">{{ alarm.clientName || '无' }}</div>
          </el-form-item>
        </div>
        <spliter />
        <div class="row-item">
          <el-form-item label="告警站点">
            <div class="content">{{ alarm.stationName || '无' }}</div>
          </el-form-item>
        </div>
      </div>
      <div class="form-row">
        <div class="row-item">
          <el-form-item label="告警设备">
            <div class="content">{{ alarm.deviceName || '无' }}</div>
          </el-form-item>
        </div>
        <spliter />
        <div class="row-item">
          <el-form-item label="当前值">
            <!-- <div class="content">{{ (alarm.currentValue == '0' ? '开':'关') || '无' }}</div> -->
            <div class="content">{{ alarm.currentValue || '无' }}</div>
          </el-form-item>
        </div>
      </div>
      <div class="form-row">
        <div class="row-item">
          <el-form-item label="动作时间">
            <div class="content">{{ alarm.confirmtime || '无' }}</div>
          </el-form-item>
        </div>
        <spliter />
        <div class="row-item">
          <el-form-item label="恢复时间">
            <div class="content">{{ alarm.repTime || '无' }}</div>
          </el-form-item>
        </div>
      </div>
      <div class="form-row">
        <div class="row-item">
          <el-form-item label="备注">
            <el-input
              v-if="alarm.status === 0"
              v-model="alarm.description"
              :placeholder="'请填写备注(选填)'"
              type="textarea"
              size="small"
            ></el-input>
            <div v-else class="content multiline">{{ alarm.description || '无' }}</div>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <template slot="footer">
      <el-button size="small" @click="visible1 = false">返回</el-button>
      <template v-if="alarm.status === 0">
        <el-button size="small" @click="cancleAlarm">取消</el-button>
        <el-button size="small" @click="confirmAlarm">确认</el-button>
        <el-button size="small" @click="dealAlarm">去处理</el-button>
      </template>
    </template>
  </c-dlg>
</template>

<script>
import Spliter from "@/components/Spliter";
import CDlg from "@/components/CDlg";
import { editEventLog } from "@/api/alarm";
export default {
  components: {
    Spliter,
    CDlg
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    alarm: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      visible1: this.visible
    };
  },
  watch: {
    visible(v) {
      this.visible1 = v;
    },
    visible1(v) {
      this.$emit("update:visible", v);
    }
  },
  methods: {
    cancleAlarm() {
      this.$confirm("确定取消告警提示?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        editEventLog(this.alarm.pkid + "", 1)
          .then(() => {
            this.visible1 = false;
            this.$emit("alarm-cancle", this.alarm.pkid);
            this.$message.success("取消成功!");
          })
          .catch(e => this.$message.error(e));
      });
    },
    confirmAlarm() {
      editEventLog(this.alarm.pkid + "", 2)
        .then(() => {
          this.visible1 = false;
          this.$emit("alarm-confirm", this.alarm.pkid);
          this.$message.success("确认成功!");
        })
        .catch(e => this.$message.error(e));
    },
    dealAlarm() {
      editEventLog(this.alarm.pkid + "", 3)
        .then(() => {
          this.visible1 = false;
          this.$emit("alarm-confirm", this.alarm.pkid);
          this.setOrder(this.alarm);
          this.$store.commit("alarm/HIDDEN");
          this.$router.push("/workorders");
        })
        .catch(e => this.$message.error(e));
    },
    setOrder({ clientId, clientName, stationId, stationName, deviceName }) {
      const order = {
        name: deviceName + " - 异常告警",
        clientId,
        clientName,
        stationId,
        stationName
      };
      this.$store.dispatch("workorder/setOrder", order);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
